const path = require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const DEST_PATH = path.resolve(__dirname, 'chrome-extension');
const basePath = './popup';

module.exports = {
  entry: './src/index.js',
  output: {
    clean: true,
    filename: `${basePath}/[name]-[chunkhash:6].js`,
    path: DEST_PATH
  },
  mode: 'production',
  performance: {
    hints: 'warning',
    maxEntrypointSize: 2 * 1024 * 1024,
    maxAssetSize: 300 * 1024,
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserWebpackPlugin({
      terserOptions: {
        format: {
          comments: false,
        },
      },
      extractComments: false
    }),
    new CssMinimizerPlugin()
    ],
    splitChunks: {
      chunks: 'all',
      minSize: 200 * 1024,
      maxSize: 230 * 1024,
      name: 'common',
      minChunks: 1,
      automaticNameDelimiter: '-'
    },
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      include: [
        path.resolve(__dirname, 'src'),
      ],
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader'
      }, {
        loader: 'ts-loader'
      }]
    }, {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      }]
    }, {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader
        }, 'css-loader']
    }, {
      test: /\.less$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader
        },
        // {
        //   loader: "style-loader", // style-loader is conflict with MiniCssExtractPlugin
        // },
        {
          loader: "css-loader",
        },
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              strictMath: false,
              javascriptEnabled: true,
              math: "always",
            },
          },
        }]
    }, {
      test: /\.svg?$/,
      use: ['svg-loader']
    },
    {
      test: /\.(png|svg|gif|jpe?g)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[chunkhash:6].[ext]',
          outputPath: 'img'
        }
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: `${basePath}/index.html`,
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        minifyJS: true,
        minifyCSS: true
      }
    }),
    new ProgressBarPlugin({
      complete: '█',
    }),
    new MiniCssExtractPlugin({
      filename: `${basePath}/[name]-[chunkhash:6].css`,
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "manifest.json",
          to: DEST_PATH,
          force: true
        },
        {
          from: "background.js",
          to: DEST_PATH,
          force: true,
          transform(content, path) {
            return content;
          },
        },
        {
          from: "contents/**/*",
          to: DEST_PATH,
          force: true,
          transform(content, path) {
            return content;
          },
        },
        {
          from: "injected/**/*",
          to: DEST_PATH,
          force: true,
          transform(content, path) {
            return content;
          },
        },
        {
          from: "logos/**/*",
          to: DEST_PATH,
          force: true
        },
      ],
    }),
  ],
  devServer: {
    // historyApiFallback: true,
    compress: true,
    port: 8081,
    host: 'localhost',
    hot: true,
    open: true,
    // static: {
    //   directory: path.resolve(__dirname, 'chrome-extension', 'popup'),
    // },
  }
};